Element Table to Json，快速构建表格应用，支持表格编辑 |
您所在的位置：网站首页 › element table可编辑 › Element Table to Json，快速构建表格应用，支持表格编辑 |
Element Table to Json，快速构建表格应用，支持表格编辑
|
vue element table to json
Git地址 Github Gitee
在 main.js 中写入以下内容，请使用 element-ui v2.15.X 以上版本 import Vue from 'vue' import ElementUI from 'element-ui' import ElTableModel from 'el-table-model' import 'element-ui/lib/theme-chalk/index.css' import 'el-table-model/lib/index.css' Vue.use(ElementUI) Vue.use(ElTableModel) 复制代码 引用-默认参数（可选） Vue.use(ElTableModel, { global: { propName: { currentPage: 'currentPage', pageSize: 'pageSize' } }, component: { table(ctx) { return { size: 'medium', border: true, highlightCurrentRow: true } }, tableColumn(ctx, column) { if (column.type === 'index') { return { width: 60 } } else { return {} } }, pagination(ctx) { return { pageSizes: [20, 50, 100] } } } }) 复制代码 组件 组件-基础创建第一个 el-table-model 实例 复制代码 export default { data() { return { queryApi: { // 详见请求章节 immediate: true, method: (params, callback) => { callback({ data: [ { id: 1, title: 'baidu', url: 'www.baidu.com' }, { id: 2, title: 'google', url: 'www.google.com' } ], total: 2 }) } }, columns: [{ // 详见数据章节 label: '标题', prop: 'title' }, { label: '地址', prop: 'url' }], pagination: { // 可继承pagination属性，不包含currentPage、pageSize、total参数 background: true, pageSizes: [5, 10, 20] } } } } 复制代码 PropProp TypeTypeRequiredquery-apiAttributeObjectTruecolumnsAttributeArrayTruepaginationAttributeObjectFalse 组件-继承表格属性可继承 Table 表格组件属性（Element Table Attributes） 复制代码 组件-继承表格事件可继承 Table 表格组件事件（Element Table Events） 复制代码 组件-执行表格事件可执行 Table 表单组件方法（Element Table Methods） export default { methods: { setTable() { this.$refs.myTable.onTableMethod('toggleRowSelection', [arg1, arg2]) } } } 复制代码或 export default { methods: { setTable() { this.$refs.myTable.$refs.table.toggleRowSelection(arg1, arg2) } } } 复制代码 请求 请求-静态数据通过 method 方法中的 callback 方法返回给组件列表数据 export default { data() { return { queryApi: { immediate: true, // 立即执行 method: (params, callback) => { callback({ data: [ { id: 1, title: 'baidu', url: 'www.baidu.com' }, { id: 2, title: 'google', url: 'www.google.com' } ], total: 2 }) } } } } } 复制代码 请求-动态数据通过 method 方法中的 callback 方法返回给组件列表数据 export default { data() { return { queryApi: { immediate: true, // 立即执行 page: true, // 开启分页 params: { // 请求参数 id: 1 }, method: async(params, callback) => { // params is { id: 1, currentPage: 1, pageSize: 20 } const res = await this.$api.getList(params) if (res) { callback({ data: res.data, total: res.total }) } } } } } } 复制代码 请求-主动执行当执行 ref.getData() 方法时，组件会执行 queryApi.method 方法 export default { methods: { getData() { this.$refs.myTable.getData() } } } 复制代码 请求-后续执行当 queryApi.immediate 属性从初始化的 false 变更为 true 时，组件会执行 queryApi.method 方法 export default { methods: { setImmediate() { this.queryApi.immediate = true } } } 复制代码 请求-修改参数当 queryApi.params 属性中的参数发生变更时，组件会自动执行 queryApi.method 方法 export default { methods: { setParams() { this.queryApi.params.id = 2 } } } 复制代码 数据 数据-类型可通过 type 属性设置表格列类型，当 type 属性为空时，将指向其 prop 属性值对应展示的数据字段名 export default { data() { return { columns: [{ type: 'expand' }, { type: 'selection' }, { label: '序号', type: 'index' }, { label: '标题', prop: 'title' }, { label: '地址', prop: 'url' }] } } } 复制代码 数据-继承表格列属性可继承 Table-column 表格列属性（Element Table-column Attributes） export default { data() { return { columns: [{ label: '标题', prop: 'title', width: '200', fixed: 'left', className: 'title-class', sortable: true, showOverflowTooltip: true, formatter (row, column, value, index) { return 'formatter' + value } }] } } } 复制代码 数据-渲染可通过 type 属性设置为 'render' 值，并使用 renderContent 属性创建渲染函数 export default { data() { return { columns: [{ label: '标题', prop: 'title', type: 'render', renderContent(h, { row, column, value, index }) { return h('span', { style: { color: '#333333', cursor: 'pointer' }, on: { click: () => { console.log('renderContent', row, column, value, index) } } }, value) } }] } } } 复制代码 数据-插槽可通过 headerSlot 属性设置自定义表头插槽内容，type 属性设置为 'slot' 值时，将优先指向其 defaultSlot 属性值的具名插槽，如若为空则指向 prop 属性值的具名插槽 {{ params.column.label }} / 自定义表头内容 {{ params.value }} / 自定义数据内容 自定义按钮 展开行的内容 插入至表格最后一行之后的内容 表格与分页之间的内容 复制代码 export default { data() { return { queryApi: { ... }, columns: [{ type: 'expand' }, { label: '标题', prop: 'title', headerSlot: 'customHeader' }, { label: '地址', prop: 'url', defaultSlot: 'customUrl', type: 'slot' }, { label: '按钮', prop: 'customButton', type: 'slot' }] } } methods: { onAction(params) { console.log('onAction', params) } } } 复制代码 数据-可拖动可通过 row-drag-sort 属性设置开启数据行拖拽排序功能，同时需设置 row-key 属性确保数据行的唯一性 复制代码 export default { data() { return { queryApi: { ... }, columns: [ ... ] } } methods: { onRowDragStart(params) { console.log('onRowDragStart', params) }, onRowDragMove(params) { console.log('onRowDragMove', params) }, onRowDragEnd(params) { console.log('onRowDragEnd', params) } } } 复制代码 PropProp TypeTypeRequiredrow-drag-sortAttributeBoolean, Object, FunctionFalserow-drag-startEventFunctionFalserow-drag-moveEventFunctionFalserow-drag-endEventFunctionFalse 数据-可拖动-继承Sortablejs选项可通过 row-drag-sort 属性设置 Sortablejs 插件的扩展选项（Sortablejs Options） 复制代码 export default { data() { return { queryApi: { ... }, columns: [ ... ] } } methods: { onRowClassName({ row, rowIndex }) { return rowIndex === 0 ? 'drag-ignore-row' : '' }, onRowDragSort({ ref }) { // sortablejs options: http://www.sortablejs.com/options.html return { animation: 300, filter: '.drag-ignore-row' } } } } 复制代码 数据-可编辑可通过 type 属性设置 'editable' 值开启数据可编辑功能，在 form 属性中添加表单子项组件 添加一行数据 添加一行数据（存在未保存的情况不可添加） {{ label }}: {{ value }} 按钮 保存 取消 复制代码 export default { data() { return { tableData: [], queryApi: { immediate: true, method: (params, callback) => { const res = { data: [{ id: '1', myInput: 'apple', myAutocomplete: 'banana', mySelect: 0, myCascader: ['zhinan', 'shejiyuanze'], myCount: 20, myTime: +new Date(), myDate: '2020-01-01', myDates: ['2020-01-01', '2020-01-02'], myDatetime: +new Date(), myMonth: '2020-01', myYear: '2020' }], total: 1 } this.tableData = res.data callback(res) } }, columns: [{ label: '输入框', prop: 'myInput', type: 'editable', form: { type: 'input', maxlength: 50, width: '100%', events: { // 继承表单元素事件 focus: e => { console.log('myInput focus', e) }, blur: e => { console.log('myInput blur', e) }, change: val => { console.log('myInput change', val) } }, rules: [ // 继承表单元素属性 { required: true, message: '请输入...', trigger: 'blur' } ] }, editable: (row, column, value, index) => { // 控制该数据是否可编辑 return index !== 0 } }, { label: '自动补全', prop: 'myAutocomplete', type: 'editable', form: { type: 'autocomplete', width: '100%', fetchSuggestions: (val, callback) => { callback([ { value: '选项1' }, { value: '选项2' } ]) }, rules: [ { required: true, message: '请输入...', trigger: 'change' } ] } }, { label: '下拉框', prop: 'mySelect', type: 'editable', form: { type: 'select', width: '100%', options: [ { label: '选项1', value: 0 }, { label: '选项2', value: 1 }, { label: 'optionSlot', value: 2, type: 'slot' } ], rules: [ { required: true, message: '请选择...', trigger: 'change' } ] }, formatter: (row, column, value, index) => { return ['选项1', '选项2', '选项3'][value] } }, { label: '级联选择', prop: 'myCascader', type: 'editable', form: { type: 'cascader', width: '100%', options: [{ value: 'zhinan', label: '指南', children: [{ value: 'shejiyuanze', label: '设计原则' }] }] }, formatter: (row, column, value, index) => { return value.join(' / ') } }, { label: '计数器', prop: 'myCount', type: 'editable', form: { type: 'count', min: 0, max: 9999 } }, { label: '时间', prop: 'myTime', type: 'editable', form: { type: 'time', valueFormat: 'timestamp', width: '100%' }, // install dayjs for data formatter // formatter: (row, column, value, index) => { // return dayjs(value).format('HH:mm:ss') // } }, { label: '日期', prop: 'myDate', type: 'editable', form: { type: 'date', valueFormat: 'yyyy-MM-dd', width: '100%' } }, { label: '多个日期', prop: 'myDates', type: 'editable', form: { type: 'dates', valueFormat: 'yyyy-MM-dd', width: '100%' }, formatter: (row, column, value) => { return value.join(' / ') } }, { label: '日期时间', prop: 'myDatetime', type: 'editable', form: { type: 'datetime', valueFormat: 'timestamp', width: '100%' }, // install dayjs for data formatter // formatter: (row, column, value, index) => { // return dayjs(value).format('YYYY-MM-DD HH:mm:ss') // } }, { label: '月份', prop: 'myMonth', type: 'editable', form: { type: 'month', valueFormat: 'yyyy-MM', width: '100%' } }, { label: '年份', prop: 'myYear', type: 'editable', form: { type: 'year', valueFormat: 'yyyy', width: '100%' } }, { label: '按钮', prop: 'button', type: 'slot' }] } }, methods: { onFocusEditable(params) { console.log('onFocusEditable', params) }, onChangeEditable(params) { console.log('onChangeEditable', params) }, onSaveRow(params) { const { index, row, refs } = params refs.form.validate((valid, object) => { const objectKeys = Object.keys(object) const isValid = objectKeys.every(key => key.indexOf(`list.${index}.`) === -1) if (isValid) { row.$isEditable = false } }) }, onCancelRow(params) { const { index } = params this.$refs.myTable.onSetEditable('cancel', index) }, onAddRow() { this.$refs.myTable.onSetEditable('create', { myInput: 'apple', mySelect: 0, myCascader: ['zhinan', 'shejiyuanze'], myCount: 20, myTime: +new Date(), myDate: '2020-01-01', myDates: ['2020-01-01', '2020-01-02'], myDatetime: +new Date(), myMonth: '2020-01', myYear: '2020' }) } } } 复制代码 PropProp TypeTypeRequiredcell-editable-focusEventFunctionFalsecell-editable-changeEventFunctionFalse其他插件 Vue2 to Composition API 语法转换器 Xlsx Viewer 一款轻量、高效的xlsx文件阅读器 Element Form to Json，快速构建表单应用，支持表单分组 Package: vue2-to-composition-api E-mail: [email protected] Author: wd3322 |
【本文地址】
今日新闻 |
推荐新闻 |